<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<%@include file="/WEB-INF/base.jspf"%>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>客服</title>
<style type="text/css">
	.p-c-flexwrapper {
		display:flex;
		align-items:center;
		margin-right:16px;
		margin-bottom:16px;
	}
	.p-c-flexwrapper > span {
		width:80px;
	}
		.modal-dialog {
		max-width: 1000px;
	}
	.p-c-flexwrapper > .form-control {
		width:180px;
	}
table th,table tr,table td {
text-align: center;
vertical-align:middle;
}
</style>
</head>
<body>
	<div style="display:flex;"><button  class="save btn btn-primary btn-lg" >新增</button></div>
	<!-- <span style="font-weight:bold;color:red;">注：页面上会显示前 3 个客服，后面的客服不会显示</span> -->
	<table id="table-i-qqAccountList" class="table table-striped table-bordered table-hover" style="margin-top: 20px;">
		<thead>
			<tr>
			<th style="display:none;"></th>
			<th>回复内容</th>
			<th>回复类型</th>
			<th>操作时间</th>
			<th>状态</th>
			<th>操作</th>
			</tr>
		</thead>
		<tbody>
		</tbody>
	</table>
	<!-- 模态框（Modal）新增 -->
 	 	<div class="modal fade" id="addAndEditModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
		    <div class="modal-dialog">
		        <div class="modal-content">
				<div class="modal-header" style="height: 10px;">
					<span style="float: left; font-size:13px;margin-top: -10px;">添加快捷回复语句 </span>
					<button type="button" class="close" data-dismiss="modal" aria-hidden="true" style="margin-top: -10px;">&times;</button>
				</div>
		            <div class="modal-body">
		            	<input id="input-i-id" hidden="hidden" class="input-auto" /> 
		            	<p class="p-c-flexwrapper"><span>回复内容：</span><textarea style="width:auto;flex-grow:1;resize: none;" class="form-control normalText" rows="4" id="textarea-i-content"></textarea></p>
		            	<p class="p-c-flexwrapper"><span>回复类型：</span>
		            	<select id="input-i-state" required class="input-auto form-control"  >
		            		<option value="0">平台客服</option>
		            		<option value="1">会员用户</option>
		            	</select>
		            	</p>
		            	
		            	
		            </div>
		            <div class="modal-footer">
		                <button type="button" class="btn btn-primary" id="button-i-submitZongDaiLi">提交</button>
		                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
		            </div>
		        </div>
		     </div>
		  </div>
		  <!-- 修改 -->
		   	 	<div class="modal fade" id="addAndEditModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
		    <div class="modal-dialog">
		        <div class="modal-content">
		        <div class="modal-header" style="height: 10px;">
					<span style="font-size:13px;float: left; margin-top: -10px;">修改快捷回复语句 </span>
					<button type="button" class="close" data-dismiss="modal" aria-hidden="true" style="margin-top: -10px;">&times;</button>
				</div>
		            <div class="modal-body">
		            	<input id="input-i-id1" hidden="hidden" class="input-auto" /> 
		            	<p class="p-c-flexwrapper"><span>回复内容：</span><textarea style="width:auto;flex-grow:1;resize: none;" class="form-control normalText" rows="4" id="textarea-i-content1"></textarea></p>
		            </div>
		            <div class="modal-footer">
		                <button type="button" class="btn btn-primary" id="button-i-submitZongDaiLi1">提交</button>
		                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
		            </div>
		        </div>
		     </div>
		  </div>
		  
		  <!-- 排序 -->
		  <div class="modal fade" id="addAndEditModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
		    <div class="modal-dialog">
		        <div class="modal-content">
		            <div class="modal-body">
		            	<input id="input-i-id2" hidden="hidden" class="input-auto" /> 
		            	<p class="p-c-flexwrapper" ><span style="width:120px;">原有排序号：</span><input   id="input-i-oldsort" required class="input-auto form-control"  disabled="disabled"/></p>
		            	<p class="p-c-flexwrapper" ><span style="width:120px;">更改排序号：</span><input   id="input-i-newsort" required class="input-auto form-control" /></p>
		            </div>
		            <div class="modal-footer">
		                <button type="button" class="btn btn-primary" id="button-i-submitZongDaiLi2">提交</button>
		                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
		            </div>
		        </div>
		     </div>
		  </div>
	
	
	
<div class="modal fade" id="noticeModal" tabindex="-1" role="dialog" aria-labelledby="noticeModal" aria-hidden="true">
    <div class="modal-dialog class-fake-alert">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            </div>
            <div class="modal-body" ></div>
            <div class="modal-footer">	      
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>   		
	<script type="text/javascript" src="/js/zhengzeTools.js"></script>
	<script type="text/javascript">
		$(".save").on("click", function(e) {
			$("#addAndEditModal").modal("show")
		})
		$("#table-i-qqAccountList").DataTable({
	      // "bPaginate": true,
	      "bLengthChange": true,      
	      "bSort": false,
	      // "bInfo": true,
	      "bAutoWidth": false,
//		         "bServerSide":true,
	      'aLengthMenu':[10, 20],
	       "searching": false,
	       "dom": `ftp`,
//		    "searching": true,l
	       "language": {//语言设置  
	            "lengthMenu": "每页显示 _MENU_ 条记录",     
	            "zeroRecords": "没有检索到数据",     
	            "sInfo": "当前显示 _START_ 到 _END_ 条，共 _TOTAL_ 条记录",     
	            "info": "没有数据",     
	            "oPaginate": {     
	                "sFirst": "首页",     
	                "sPrevious": "前一页",     
	                "sNext": "后一页",     
	                "sLast": "尾页"    
	          	},
	            "search":"搜索:",
	            "infoFiltered":   "(从  _MAX_ 记录中搜索出结果)",
	            "infoEmpty":      "没有找到匹配的信息",
	         },
	         "drawCallback": function( settings ) {
	        	 $(".input-c-mySwitch").bootstrapSwitch()
	         },
	         "ajax": {
	        	 "type": "POST",
	        	 "url": "/kf/findAllKeFuQuick.do",
	        	 "dataSrc": function(json) {
	        		 var newJson = json.data
	        		 $("div").data("newData",newJson)
	        		 for (var i = 0; i < newJson.length; i++) {
	         			var item = newJson[i]
	         			 var stateValue = ""
	        			 if (item.state == "1") {
	        				 stateValue = "checked"
	        			 } else {
	        				 stateValue = ""
	        			 }
	         			 if(item.type==0){
	         				item.type="平台客服"
	         			}else{
	         				item.type="会员用户"
	         			} 	
	         			item.typeValue = item.type
         				item.type = "<span class='bootstrap-background " + item.name + "'>" + item.type  + "</span>"
         				item.state = "<input class='input-c-mySwitch' data-size='small' type='checkbox' " + stateValue + " data-on-text='启用' data-on-color='success' data-off-color='danger' data-off-text='禁用' />"
	        		 }
	        		 return newJson
	        	 },
	         },
	         "columns": [
						 {"data": "id", "className": "hidden-td id-edit-td"},
	                     {"data": "content", "className": "content-edit-td"},
	                     {"data": "type", "className": "type-edit-td"},
	                     {"data": "createTime", "className": "createTime-edit-td"},
	                     {"data": "state", "className": "state-edit-td"},
	                     {"data": null, "defaultContent": "<button class='btn btn-warning btn-c-editBankInfo btn-sm'>修改</button> <button class='btn btn-danger btn-c-delBankInfo btn-sm'>删除</button>"},
	                 ]        
	   		 })		
		$("#button-i-submitZongDaiLi").on("click",function(){
		$("#addAndEditModal").modal("hide")
		var state=$("#input-i-state").val()
	 	$.ajax({
			type: "POST",
       	 	url: "/kf/addKeFuQuick.do",
       	 	data:{
       	 		"content":$("#textarea-i-content").val(),
       	 		"type":state
       	 		},
       	 	success:function(data){
       	 		$("#table-i-qqAccountList").DataTable().ajax.reload();
   	 			alert("新增成功")
   	 		},
		}) 
	})
			bindJinYongQiYongSwitch("#table-i-qqAccountList", "/kf/updateKeFuQuick.do", "state")
			var id=0;	
			$("#table-i-qqAccountList").on("click", ".btn-c-editBankInfo", function(event) {
				$("#addAndEditModal1").modal("show")
				id=$(this).parent().siblings(".id-edit-td").text()
				$("#textarea-i-content1").text($(this).parent().siblings(".content-edit-td").text())
			})
		 		
			 $("#addAndEditModal1").on("click", "#button-i-submitZongDaiLi1", function(event) {
				 $("#addAndEditModal1").modal("hide")
				$.ajax({
					type: "POST",
		       	 	url: "/kf/updateKeFuQuick.do",
		       	 	data:{
		       	 		"id":id,
		       	 		"content":$("#textarea-i-content1").val(),
		       	 		},
		       	 	success:function(data){
		       	 	$("#table-i-qqAccountList").DataTable().ajax.reload();
		       	 	alert("修改成功")
		       	 	}
				})
			}) 

			$("#table-i-qqAccountList").on("click", ".btn-c-delBankInfo", function(event) {
				
				$.ajax({
					type: "POST",
		       	 	url: "/kf/deleteKeFuQuick.do",
		       	 	data:{
		       	 		"id":$(this).parent().siblings(".id-edit-td").text()
		       	 		},
		       	 	success:function(data){
		       	 	$("#table-i-qqAccountList").DataTable().ajax.reload();
		       	 	alert("删除成功")
		       	 	}
		       	 	
				})
			})
			
					
	</script>
</body>
</html>